<template>
  <div class="common-title">
    <div v-if="title.isBack" class="title-back" @click="router.back()">
      <i class="iconfont icon-return"></i>
      返回
    </div>
    <el-breadcrumb separator="/">
      <template v-for="(item, $i) in title.list">
        <el-breadcrumb-item :to="{ path: item.url }" :key="$i" v-if="item.url !== undefined">{{ item.label }}</el-breadcrumb-item>
        <el-breadcrumb-item :key="'a_' + $i" v-else>{{ item.label }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router';
  import { computed } from 'vue';

  const route = useRoute();
  const router = useRouter();

  const title: any = computed(() => {
    if (route.meta.title) {
      return route.meta.title;
    } else {
      return { isBack: false, list: [{ label: '无标题' }] };
    }
  });
  console.log('🚀 ~ file: CommonTitle.vue ~ line 9 ~ route', route.meta);
</script>

<style lang="scss" scoped>
  .common-title {
    height: 20px;
    padding: 0 0 20px 0;
    font-size: 16px;
    user-select: none;
    display: flex;

    .title-back {
      border-right: 1px solid #ccc;
      padding-right: 10px;
      margin-right: 10px;
      height: 18px;
      line-height: 16px;
      &:hover {
        cursor: pointer;
      }
    }

    .el-breadcrumb {
      font-size: 16px;
      height: 20px;
      line-height: 20px !important;
    }
  }
</style>
